<template>
  <view class="family-entry-template">
    <view class="table-row">
      <view class="table-title">成员姓名</view>
      <view class="table-cell">
        <wd-input
          type="text"
          v-model="data.familyName"
          :readonly="props.readonly"
          placeholder="请输入成员姓名"
          @change="$emit('update-data', { familyName: data.familyName })"
        />
      </view>
    </view>
    <view class="table-row">
      <view class="table-title">成员关系</view>
      <view class="table-cell">
        <wd-input
          type="text"
          v-model="data.membership"
          :readonly="props.readonly"
          placeholder="请输入与成员关系"
          @change="$emit('update-data', { membership: data.membership })"
        />
      </view>
    </view>
    <view class="table-row">
      <view class="table-title">成员年龄</view>
      <view class="table-cell">
        <wd-input
          type="text"
          v-model="data.familyAge"
          :readonly="props.readonly"
          placeholder="请输入成员年龄"
          @change="$emit('update-data', { familyAge: data.familyAge })"
        />
      </view>
    </view>
    <view class="table-row">
      <view class="table-title">成员职业</view>
      <view class="table-cell">
        <wd-input
          type="text"
          v-model="data.familyCareer"
          :readonly="props.readonly"
          placeholder="请输入成员职业"
          @change="$emit('update-data', { familyCareer: data.familyCareer })"
        />
      </view>
    </view>
    <view class="table-row">
      <view class="table-title" style="width: 100px">公司/学校名称</view>
      <view class="table-cell">
        <wd-input
          type="text"
          v-model="data.corporateName"
          :readonly="props.readonly"
          placeholder="请输入公司/学校名称"
          @change="$emit('update-data', { corporateName: data.corporateName })"
        />
      </view>
    </view>
    <slot name="footer"></slot>
  </view>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  data: {
    type: Object,
    default: () => ({
      familyName: '',
      membership: '',
      familyAge: '',
      familyCareer: '',
      corporateName: '',
    }),
  },
  readonly: {
    type: Boolean,
    default: false,
  },
})

const emits = defineEmits(['update-data'])
</script>

<style scoped>
.family-entry-template {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
}

.table-row {
  display: flex;
  align-items: center;
  height: 34px;
}

.table-title {
  width: 65px;
  padding-right: 10px;
  font-weight: 900;
  color: black;
  text-align: right;
}

.table-cell {
  margin-left: 25px;
}
</style>
